<section class="content">

  <div class="row">
    <div class="col-sm-12">


      <div class="box box-success box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">所有笔记</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
          <!-- /.box-tools -->
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="clearfix">
            <div class="btn-group">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" >{{capacity}} <i class="fa fa-angle-down"></i>
              </button>
              <ul class="dropdown-menu pull-right">
                <li><a href="javascript:void(0);" *ngFor="let capa of GetCapacityS()" (click)="OnCapacityChange(capa)" >{{capa}}</a></li>
              </ul>
            </div>
            <div class="btn-group pull-right">
              <label>查找属性： <input class="form-control medium search-box" placeholder="查找" aria-controls="editable-sample" type="text" [value]="searchKey" #sKey (keyup)="searchKey = sKey.value"></label>
            </div>
          </div>

          <table class="table table-striped table-hover table-bordered" id="editable-sample">
            <thead>
            <tr>
              <th>名字</th>
              <th>描述</th>
              <th>创建时间</th>
              <th>最近修改</th>
              <th>编辑</th>
              <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr class="" *ngFor="let note of GetFilteredData();let i = index;">
              <td><a href="javascript:void(0);" (click)="LinkClick(note.url)">{{note.title}}</a></td>
              <td>{{note.describe}}</td>
              <td>{{note.createtime|date:'yy-MM-dd'}}</td>
              <td class="center">{{note.modifytime|date:'yy-MM-dd'}}</td>
              <td><a class="edit" href="javascript:;" (click)="showModifyModal(i)">编辑</a></td>
              <!-- td><a class="delete" href="javascript:;" (click)="deleteModal.show()">删除</a></td> -->
              <td><a class="delete" href="javascript:;" (click)="showDeleteModal(i)">删除</a></td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>

    </div>
  </div>
</section>




<div bsModal #deleteModal="bs-modal" class="modal modal-danger fade" tabindex="-1" role="dialog" aria-labelledby="modal-delete-label">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal-delete-label">注意</h4>
      </div>
      <div class="modal-body">
        <p>确定要删除<span style="color: #51b2ed;">{{currentSelectNote.title}}</span>这条笔记吗&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline pull-left" (click)="hideDeleteModal()">取消</button>
        <button type="button" class="btn btn-outline" (click)="deleteSure()">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<div bsModal #modifyModal="bs-modal" class="modal modal-info fade" tabindex="-1" role="dialog" aria-labelledby="modal-modify-label">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal-modify-label">提示</h4>
      </div>
      <div class="modal-body">
        <p>确定要修改<span style="color: #51b2ed;">{{currentSelectNote.title}}</span>这条笔记吗&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline pull-left" (click)="hideModifyModal()">取消</button>
        <button type="button" class="btn btn-outline" (click)="modifySure()">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
